<template>
	<view>
		<!-- 搜索 -->
		<view class= "search-cont" @click="clickSearch()">
			<view class="search">
				<image src="../../static/icon/sousuo.svg" mode="widthFix" class="search-img"></image>
				<!-- 搜索框禁用只是提示用户这里可以点击，当点击之后跳转到用户搜索的界面 -->
				<input type="text" placeholder="麻辣烫" disabled="true" />
			</view>
		</view>
		
		<!-- 快捷标签展示 -->
		<view class="showtag-contains">
			<block v-for="(item, index) in list" :key="index">
				<view>{{item.title}}</view>
			</block> 
		</view>
		
		<!-- 轮播图 -->
		<!-- 自定义轮播  indicator-dots：是否显示面板指示点  -->
		 <view class="swiper-view"> 
		 <!-- interval切换间隔，duration切换时长 -->
			<swiper :autoplay="false" :interval="2000" :duration="1000" @change="bannerfun">
				<!-- 遍历x -->
				<block v-for="(item, index) in lable" :key="index">
				<swiper-item>
					<view class="swiper-item">
						<!-- 遍历y -->
						<block v-for="(listdata, index) in item" :key="index">
							<view class="conteng-img">
								<image class="uploadimg" :src="listdata.img" mode="widthFix"></image>
								<text>{{listdata.title}}</text>
							</view>
						</block>
					</view>
				</swiper-item>
				</block>
			</swiper>
			
			<!-- 指示灯  面板指示灯不符合我们的要求 -->
			<view class="instruct-view">
				<!-- active:index == num 相等的时候会把active样式加上去， -->				
				<block v-for="(item, index) in lable" :key="index">
					<view class="instruct" :class="{active:index == num}">
					</view>
				</block>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						"title": "蛋糕"
					},
					{
						"title": "炸鸡"
					},
					{
						"title": "茶颜悦色"
					},
					{
						"title": "麻辣烫"
					}
				],
				
				num: 0,
				// 轮播数组
				lable: [
					[
						{
							'img': '/static/images/meishi.png',
							'title': '美食1 ' 
						},
						{
							'img': '/static/images/meishi.png',
							'title': '美食1 ' 
						},
						{
							'img': '/static/images/meishi.png',
							'title': '美食1 ' 
						},
						{
							'img': '/static/images/meishi.png',
							'title': '美食1 ' 
						},					
						{
							'img': '/static/images/meishi.png',
							'title': '美食1 ' 
						},
						{
							'img': '/static/images/meishi.png',
							'title': '美食1 ' 
						},
						{
							'img': '/static/images/meishi.png',
							'title': '美食1 ' 
						},
						{
							'img': '/static/images/meishi.png',
							'title': '美食8' 
						}
					],
					[ 
						{
							'img': '/static/images/meishi.png',
							'title': '美食2' 
						},
						{
							'img': '/static/images/meishi.png',
							'title': '美食2' 
						},
						{
							'img': '/static/images/meishi.png',
							'title': '美食2' 
						},
						{
							'img': '/static/images/meishi.png',
							'title': '美食2' 
						},
						{
							'img': '/static/images/meishi.png',
							'title': '美食2' 
						},
						{
							'img': '/static/images/meishi.png',
							'title': '美食2' 
						},
						{
							'img': '/static/images/meishi.png',
							'title': '美食2' 
						},
						{
							'img': '/static/images/meishi.png',
							'title': '美食2' 
						}
					]
				]
			}
		},
		methods: {
			/* 监听页面的滑动 */
			bannerfun(e) {
				// console.log(e.detail.current);
				this.num = e.detail.current;
			},
			
			/**/
			clickSearch() {
				/* 点击了主页的搜索 */
				console.log("点击了到主页的搜索");
				uni.navigateTo({
					url: '/components/searchpage/searchpage'
				})
			}
		}
	}
</script>

<style scoped>
	/* 搜索 */
	.search-img {
		margin: auto 0 auto 20upx;
		width: 40upx;
		height: 40upx;
	}
 	.search {
 		height: 70upx;
		line-height: 70upx;
		width: 100%;
		display: flex;
		flex-direction: flex;
		background: #eff3f4;
		border-radius: 30rpx; 
	}
	.search input {
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		font-size:25upx;
		color: #666666;
		padding-left: 20upx;
		/* border-radius: 20upx; */
	}
/*		.search-cont {
		display: flex;
		justify-content: space-between;
		height: 70upx;
		align-items: center;
		width: 100%;
	} */
	
	/* 整个容器的属性 */
	.showtag-contains {
		margin-top: 5upx;
		font-size: 25upx; 
		display: flex; 
		align-items: center; /* flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方 */
		color: black;
		height: 70upx;
	}
	
	/* 容器中快捷搜索标签的属性 */
	.showtag-contains view {
		padding: 5upx 10upx 5upx 10upx;
		margin-right: 20upx;
		background: #eff3f4;
		border-radius: 20upx;
	}
	
	
	/* 轮播图 */
	/* 轮播   !important 提高它的层级*/
	.swiper-view {
		margin-top: 10upx;
		/* padding-bottom: 5upx; */
		background-color: #EBEEF5;
		border-radius: 17rpx; 
	}
	swiper {height: 320upx !important;}
	/* 九宫格 */
	.swiper-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		height: 320upx;
	}
	.conteng-img {
		width: calc((100%/5) - 12px) !important;
		margin: 10px;
		/* margin: 6px; */
		/* height: 120upx; */
		position: relative;
		text-align: center;
	}
	.conteng-img text {
		padding-top: 20upx;
		font-size: 25upx;
	}
	
	/* 美食图片背景 */
	.uploadimg {
		width: 70upx;
		height: 70upx;
		border-radius: 50upx;
		display: block;
		margin: 0 auto;
	}
	
	/* 指示灯 */
	.instruct-view {
		display: flex;
		justify-content: center;
		padding-top: 2upx; 
		/* margin-bottom: 10upx; */
	}
	.instruct {
		background: #e6e6e6;
		height: 10upx;
		width: 30upx;
		border-radius: 50upx;
		/* margin: 0 10upx; */
		margin-left: 15upx;
		margin-bottom: 10upx;
		
	}
	.active {
		background: #fbae22 !important;
	}

</style>
